<template>
    <section class="watchSection" >
        <layout :isVertical="true"  v-loading="loading">
            <common-toolbar text="影院变更信息确认">
                <!-- <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button> -->
            </common-toolbar>
            <!-- <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div> -->
              <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection" style="position: relative;">
                        <div style="width:100%;text-align: left;padding-left:20px;font-weight: bold;height:40px;line-height:40px;vertical-align: baseline">
                            <img  class="cinemaImg" src="../../imgs/cinema.png" />
                            <span style="margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;">{{findByPropertyCodeList.cinemaAddress}}</span>
                        </div>
                        <div style="color:#666;font-size: 13px;padding: 10px 30px;line-height: 30px;">
                            <!-- {{from}} -->
                            <el-row>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    影院名称:
                                </el-col>
                                <el-col :span="4">
                                    {{findByPropertyCodeList.cinemaName}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    专资编码:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.cinemaCode}}
                                </el-col>
                                <el-col :span="2" style="text-align:center;color:#666;font-weight:bold;padding-right:20px;">
                                    影院地址:
                                </el-col>
                                <el-col :span="7">
                                    {{findByPropertyCodeList.cinemaAddress}}
                                </el-col>
                                
                              
                            </el-row>
                            <el-row>
                                 <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;padding-right:20px;">
                                    联系人:
                                </el-col>
                                <el-col :span="4">
                                    {{findByPropertyCodeList.contactNameOne}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    联系电话:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.contactPhoneOne}}
                                </el-col>
                               
                                <el-col :span="2" style="text-align:center;color:#666;font-weight:bold;padding-right:20px;">
                                    变更类型:
                                </el-col>
                                <el-col :span="7">
                                    {{findByPropertyCodeList.changeTypeDesc}}
                                </el-col>
                            </el-row>
                        </div>
                        <el-button class="btn commonButton" type="default" @click="flmConfirm" :disabled="disableName" style="color:#fff;position: absolute;right: 10px;top: 35%;    background: rgb(103, 194, 58) !important;border-color: rgb(103, 194, 58);">确认此次变更</el-button>
                    </layout>
                </layout>
                <div>
                    <div class="conten">
                        <div class="left">
                            <div style="position: relative;height: 60px;">
                                <vxe-button @click="insertEvent"  style="position: absolute;top: 24%;margin: 0;" :disabled="disable" ><i class="el-icon-circle-plus-outline"></i>新增影厅</vxe-button>
                                <p style="position: absolute;left: 56%;top: 38%;margin: 0;">请在此处人工匹配厅-设备信息</p>
                            </div>
                            <el-table
                                ref="singleTable"
                                :data="tableDataBefore"
                                border
                                style="width: 100%"
                                :height="height"
                                
                                >
                            <el-table-column
                                label="操作"
                                width="50">
                                <template slot-scope="scope">
                                    <el-button
                                    @click="deleteRow(scope.$index, scope.row)"
                                    type="text"
                                    size="small" class="el-icon-remove-outline" :disabled="disable" >
                                    </el-button>
                                </template>
                                </el-table-column>
                                <el-table-column
                                property="posHallNo"
                                label="原厅号"
                                width="70">
                                <template slot-scope="scope">
                                    <span>{{scope.row.posHallNo}}</span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                property="posHallName"
                                label="原厅名"
                                width="120" show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                   <span v-if="scope.row.posHallName!=undefined">pos厅名：<span v-if="scope.row.posHallName!=''&&scope.row.posHallName!=null">{{scope.row.posHallName}}</span> <span v-else>暂无</span> -tms厅名：<span v-if="scope.row.tmsHallName!=''&&scope.row.tmsHallName!=null">{{scope.row.tmsHallName}}</span> <span v-else>暂无</span> </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                property="address"
                                label="确认后厅号-厅名-设备信息（请从下拉菜单选择右侧影厅进行匹配）">
                                <template slot-scope="scope"> 
                                    <div>
                                        <el-row >
                                            <!-- {{windowWeight}} -->
                                            <el-col :span="10" style="width: 170px;"><div class="grid-content bg-purple">厅匹配</div></el-col>
                                            <el-col :span="14" :style="{'width':windowWeight+'px'}"><div class="grid-content bg-purple-light"> 
                                                <el-select v-model="scope.row.roleName"  :disabled="disable"  placeholder="请手动选择匹配序号" @change="changeSelect(scope.row,scope.$index,scope.row.roleName)">
                                                <el-option
                                                v-for="(item,index) in tableDataAfter"
                                                :key="item.posHallNo"
                                                :label="index+1"
                                                :value="item.posHallNo">
                                                </el-option>
                                        </el-select></div></el-col>
                                        </el-row>
                                        <el-row>
                                        <el-col :span="6" style="width: 70px;line-height: 20px;display: flex;align-items: center;height: 136px;justify-content: center;"><div class="grid-content bg-purple">
                                            <span v-if="scope.row.roleName!=undefined">{{scope.row.roleName}}</span>
                                            </div> 
                                            </el-col>
                                        <el-col :span="4" style="line-height: 20px;height: 136px;width: 100px;display: flex;align-items: center;justify-content: center;"><div class="grid-content bg-purple-light">
                                            <span v-if="scope.row.roleName!=undefined">pos厅名：<span v-if="scope.row.posHallNames!=''&&scope.row.posHallNames!=null">{{scope.row.posHallNames}}</span> <span v-else>暂无</span> -tms厅名：<span v-if="scope.row.tmsHallNames!=''&&scope.row.tmsHallNames!=null">{{scope.row.tmsHallNames}}</span> <span v-else>暂无</span> </span>
                                            </div> 
                                            </el-col>
                                        <el-col :span="14" :style="{'width':windowWeight+'px'}"><div class="grid-content bg-purple-light">
                                            <ul >
                                                <li v-for="(item,index) in scope.row.servers" :key="index"  :style="{background:getBackgtound(item)}">
                                                    <span>设备类型：{{item.deviceTypeEnName}}</span>
                                                    <span>制造名称：{{item.deviceManu}}</span>
                                                    <span>设备型号:{{item.deviceCatName}}</span>
                                                    <span>序列号:{{item.deviceSn}}</span>
                                                    <span>设备IP:{{item.deviceIp}}</span>

                                                </li>
                                            </ul>
                                            </div></el-col>

                                        </el-row>
                                    </div>
                                </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="left">
                            <p>待匹配信息</p>
                            <el-table
                                ref="singleTable"
                                :data="tableDataAfter"
                                border
                                style="width: 100%"
                                :height="height"
                                >
                                <el-table-column
                                label="匹配序号"
                                type="index"
                                width="70">
                                <template slot-scope="scope">
                                    <button @click="getflmDetailHall(scope.row)">{{scope.$index+1}}</button>
                                </template>
                                </el-table-column>
                                 <el-table-column
                                label="厅号"
                                type="index"
                                width="70">
                                <template slot-scope="scope">
                                    <span> {{scope.row.posHallNo}}</span>
                                </template>
                                </el-table-column>
                                 <el-table-column
                                label="厅名"
                                type="index"
                                width="100">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="24" style="line-height: 20px;height: 136px;display: flex;align-items: center;justify-content: center;"><div class="grid-content bg-purple">
                                         <span v-if="scope.row.posHallName!=undefined">pos厅名：<span v-if="scope.row.posHallName!=''&&scope.row.posHallName!=null">{{scope.row.posHallName}}</span> <span v-else>暂无</span> -tms厅名：<span v-if="scope.row.tmsHallName!=''&&scope.row.tmsHallName!=null">{{scope.row.tmsHallName}}</span> <span v-else>暂无</span> </span>
                                </div></el-col></el-row>
                                </template>
                                </el-table-column>
                                <el-table-column
                                property="address"
                                label="变更后厅号-厅名-设备信息">
                                <template  slot-scope="scope">
                                    <div>
                                        
                                        <el-row>
                                        <el-col :span="24"><div class="grid-content bg-purple-light">
                                            <ul :style="{'width':windowWeight1}">
                                                <li v-for="(item,index) in scope.row.servers" :key="index" :style="{background:getBackgtound(item)}">
                                                    <span>设备类型：{{item.deviceTypeEnName}}</span>
                                                    <span>制造名称：{{item.deviceManu}}</span>
                                                    <span>设备型号:{{item.deviceCatName}}</span>
                                                    <span>序列号:{{item.deviceSn}}</span>
                                                    <span>设备IP:{{item.deviceIp}}</span>

                                                </li>
                                            </ul>
                                            </div></el-col>

                                        </el-row>
                                    </div>
                                </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
        </layout>
        <el-dialog
            title="光峰设备信息变更须知"
            :visible.sync="dialogVisibleconfirm"
            width="31%">
            <span  style="height: 60px;display: block;">该份信息中包含需中环服务人员人工处理的光峰设备，预计24h后完成该部分设备信息更新</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleconfirm = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleTrue">确 定</el-button>
            </span>
            </el-dialog>
        <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="影院地址">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="信息变更时间">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="影厅信息"
                :visible.sync="dialogVisible1"
                width="30%" class="dialogVisible1">
            <div>
                <p>1.TMS影厅号: {{list.auditoriumNumber}} <span v-if="list.auditoriumNumber==null">-</span> </p>
                <p>2.TMS影厅名: {{list.auditoriumName}} <span v-if="list.auditoriumName==null">-</span></p>
                <p>3.POS影厅号: {{list.posAuditoriumNumber}} <span v-if="list.posAuditoriumNumber==null">-</span></p>
                <p>4.POS影厅名: {{list.posAuditoriumName}} <span v-if="list.posAuditoriumName==null">-</span></p>
                <p>5.银幕画幅比: {{list.screenAspectRatio}} <span v-if="list.screenAspectRatio==null">-</span></p>
                <p>6.银幕画幅: {{list.adjustableScreenMask}} <span v-if="list.adjustableScreenMask==null">-</span></p>
                <p>7.安装日期: {{list.auditoriumInstallDate}} <span v-if="list.auditoriumInstallDate==null">-</span></p>
                <p>8.大银幕格式: {{list.largeFormatType}} <span v-if="list.largeFormatType==null">-</span></p>
                <p>9.银幕类型: {{list.screenType}} <span v-if="list.screenType==null">-</span></p>
                <p>10.品牌类型: {{list.plf}} <span v-if="list.plf==null">-</span></p>
                <p>11.光源类型: {{list.lsf}} <span v-if="list.lsf==null">-</span></p>
                <p>12.数字3d系统: <span v-if="list.isActive!=null&&list.isActive=='true'">可用</span><span v-else>不可用</span></p>
                <p>13.3D配置: {{list.digital3DConfiguration}} <span v-if="list.digital3DConfiguration==null">-</span></p>
                <p>14.3D安装时间: {{list.installDate}} <span v-if="list.installDate==null">-</span></p>
                <p>15.屏幕亮度: {{list.screenLuminance}} <span v-if="list.screenLuminance==null">-</span></p>
                <p>16.是否支持ghostbusting技术: <span v-if="list.ghostBusting!=null&&list.ghostBusting=='true'">是</span><span v-else>否</span> </p>
            </div>
        </el-dialog>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './cinemaList.service';
    import formData from '@/views/form/formChange.vue';

    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';

    @Component({components:{
        formData
    }})
    export default class cinemaList extends Vue{
        height = 565;
        windowHeight = 700;
        windowWeight = 580;
        windowWeight1 = document.documentElement.clientWidth - 1165;
        loading = false;
        data = [];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        conmonDisabled:boolean=false;
        disableName=false;
        dialogVisible = false;
        dialogVisible1=false;
        dialogVisibleconfirm =false;
        dataList={}
        list={}
        form = {
            name: '',
            code: '',
            date : ''
        };
        rowList=[]
        value='';
        findByPropertyCodeList = {}
        mergeCells= []
        mergeFooterItems= [];
        tableDataAfter=[];
        tableDataBefore= [];
        listData=[];
        disable = false
        bodyHeight = document.documentElement.clientHeight - 380 ;
        validRules= {
        role: [
            { required: true, message: '角色值必须填写' }
        ],
        name: [
            { required: true, message: '名称必须填写' }
        ],
        address: [
            { required: true, message: '地址必须填写' }
        ]
    };
        constructor(){
            super();
        };
        // 序号
        indexMethod(index) {
        return (this.page - 1) * this.pageSize + index + 1;
        }
         // 通用行合并函数（将相同多列数据合并为一行）
            footerMethod ({ columns }) {
              return [
                columns.map((column, index) => index),
                columns.map((column, index) => 1000 + index)
              ]
            }
            insertEvent () {
              this.tableDataBefore.push({})
            }
             async removeRowEvent (row) {
              const $table = this.$refs.xTable
              await $table.remove(row)
            }
        searchErrorList(){
            this.onlyShowError = true;
            this.searchList();
        }
        message() {
            this['$message']({
                message: '还未完整匹配影厅信息，请检查调整后重新提交',
                type: 'warning'
            });
        }
        getBackgtound(row) {
            if(row.flag == true&&row.operation == true) {
                return ''
            } else if(row.operation == false) {
                this.disable =true;
                this.disableName =true;
                return '#FDEFEF';
            } else if(row.flag == false) {
                if(row.operation==false) {this.disable = true;
                this.disableName =true}
                return row.operation ==false ? '#FDEFEF' :'beige'
            }
        }
        flmConfirm() {
            let cinemaInformationConfirmation = JSON.parse(window.localStorage.getItem('cinemaInformationConfirmation'))
            let params = {};
            console.log(this.findByPropertyCodeList)
            params = this.findByPropertyCodeList
            let data =  params
            this.$set(data,'taskId',cinemaInformationConfirmation.taskId)
            this.$set(data,'deviceConfirm',this.findByPropertyCodeList.deviceBefore)
            console.log(data.deviceConfirm)
            if(data.deviceConfirm!=undefined) {
                let someResult=data.deviceConfirm.every(function(item,index,arry){
                       return  item.roleName !=undefined || item.roleName != null
               })
               console.log(someResult)
               if(this.tableDataAfter.length != data.deviceConfirm.length ||someResult==false) {
                   return this.message()
               } 
                for(let item of data.deviceConfirm) {
                item.posHallName = item.posHallNames;
                item.posHallNo = item.roleName;
            }
            if(this.tableDataAfter.length == data.deviceConfirm.length) {
                let deviceAfter = [];
                let deviceConfirm=[]
                for(let itemAfter of data.deviceAfter) {
                    if(itemAfter.servers!=null) {
                        for(let itemName of itemAfter.servers) {
                            deviceAfter.push(itemName)
                        }
                    }
                }
                for(let item of data.deviceConfirm) {
                    //  delete item.posHallNames;
                    //  delete item.roleName;
                     if(item.servers!=null) {
                         for(let itemName of item.servers) {
                            deviceAfter.push(itemName)
                        }
                     }
                }
                let someResult=false;
                if(deviceAfter!=[]) {
                    someResult=deviceAfter.every(function(item,index,arry){
                        console.log(item.flag)
                        return item.flag
                    })
                } else {
                    someResult=true
                }
                // console.log(someResult,deviceAfter,deviceConfirm)
                if(someResult == true) {
                    return this.flmConfirmData(data)
                } else {
                    this.dialogVisibleconfirm = true;
                    this.dataList = data;
                    // this.$confirm('该份信息中包含需中环服务人员人工处理的光峰设备，预计24h后完成该部分设备信息更新', '光峰设备信息变更须知', {
                    //     confirmButtonText: '确定',
                    //     cancelButtonText: '取消',
                    // }).then(() => {
                    //     return this.flmConfirmData(data)
                    // }).catch(() => {         
                    // });
                    // this.$alert('该份信息中包含需中环服务人员人工处理的光峰设备，预计24h后完成该部分设备信息更新', '光峰设备信息变更须知', {
                    //     confirmButtonText: '确定',
                    //     callback: action => {
                    //         return this.flmConfirmData(data)
                    //     }
                    // })
                }
            } 
            }
            
           
            
            
        }
        dialogVisibleTrue() {
            return this.flmConfirmData(this.dataList)
        }
        flmConfirmData(data) {
            console.log(data)
            data.deviceConfirm.some((cur,idx,arr)=>arr.slice(idx+1).find(item=>{
                if(cur.roleName==item.roleName) {
                     this.disableName = true;
                } 
                return;
            }));
            if(this.disableName==true) {
                return this['$message']({
                        message: '该厅已匹配，不可重复选择',
                        type: 'warning'
                    });
            } else {
                console.log(this.tableDataBefore,this.findByPropertyCodeList)
                for (let item of this.findByPropertyCodeList.deviceConfirm) {
                    console.log(item)
                    this.$set(item,'tmsHallName',item.tmsHallNames)
                }
                Service.flmConfirm(this.findByPropertyCodeList).then((res)=>{
                    if(res.data.retMessage=='成功'){
                    this['$message']({
                            message: res.data.retMessage,
                            type: 'success'
                        });
                        this.searchList();
                        this.back()
                        this.dialogVisibleconfirm = false;
                    }else{
                        this['$message']({
                            message: res.data.retMessage,
                            type: 'error'
                        });
                    }
                
                })
            }
        }
         back(): void {
            this.$router.go(-1);
        }
        getflmDetailHall(row) {
            let cinemaInformationConfirmation = JSON.parse(window.localStorage.getItem('cinemaInformationConfirmation'))
            let params = {
                taskId: cinemaInformationConfirmation.taskId,
                posHallCode:row.posHallNo
            }
            Service.flmDetailHall(params).then(res=>{
                if(res.data.retMessage=='成功'){
                    this.dialogVisible1 = true;

                    this.list = res.data.result
                    // for(let item of res.data.result.deviceAfter) {
                    //     this.$set(item,'roleName','')
                    // }
                    // this.tableDataAfter = res.data.result.deviceAfter
                    // this.tableDataBefore = res.data.result.deviceBefore
                    // this.loading = false;

                //    this['$message']({
                //         message: res.data.retMessage,
                //         type: 'success'
                //     });
                }else{
                    this['$message']({
                        message: res.data.retMessage,
                        type: 'error'
                    });
                }
            })
        }
        searchAllList(){
            this.onlyShowError = false;
            this.searchList();
        }
        changeSelect(row,index,roleName) {
             this.disableName = false;
            console.log(this.tableDataBefore,row,index,roleName)
            for(let item in this.tableDataBefore) {
                if(item == index) {
                    if(this.tableDataBefore[item].servers!=undefined &&this.tableDataBefore[item].servers.length>0) {
                        this.listData.splice(item,1,roleName)
                    } else {
                        this.listData.push(roleName)
                    }
                }
            }
            this.rowList.push(index)
            if(this.listData.length>1) {
                let s = this.listData.join(",")+",";
               
                for(let i=0;i<this.listData.length;i++) {
                        if(s.replace(this.listData[i]+",","").indexOf(this.listData[i]+",")>-1) {
                            // this.disableName = true;
                            this['$message']({
                                message: '该厅已匹配，不可重复选择',
                                type: 'warning'
                            });
                            console.log(i,index)
                            this.listData = Array.from(new Set(this.listData))
                            // this.listData.splice(this.listData.length-1,1)
                            break;
                        } 
                }
            }
            console.log(this.listData,row)

            let list =[]
            console.log(this.tableDataBefore[index])
            if(this.tableDataBefore[index].servers!==undefined&&this.tableDataBefore[index].servers.length>0&&this.tableDataBefore[index].servers[0].flag==false) {
                list = [];
                for(let item of this.tableDataBefore[index].servers) {
                     if(item.flag == false) {
                         list.push(item)
                     }
                }
             this.tableDataBefore[index].servers = list;
            } else if(this.tableDataBefore[index].servers==undefined) {
                this.$set(this.tableDataBefore[index],'servers',[])
            } else {
                list = [];
                for(let item of this.tableDataBefore[index].servers) {
                     if(item.flag == false) {
                         list.push(item)
                     }
                }
                this.tableDataBefore[index].servers = list;
                // this.tableDataBefore[index].servers = [];
            }
            
            for(let item of this.tableDataAfter) {
                if(row.roleName == item.posHallNo) {
                    for(let items of item.servers) {
                        if(items.flag == true) {
                            this.tableDataBefore[index].servers.push(items)
                            this.$set(this.tableDataBefore[index],'posHallNames',item.posHallName)
                            this.$set(this.tableDataBefore[index],'tmsHallNames',item.tmsHallName)

                        }
                    }
                }
            }
        }
        deleteRow(index,row) {
            // console.log(typeof(index))
            // let num = index +Number(1)
            // console.log(typeof(num))
            console.log(row)
            let someResult=false;
            if(row.servers!=null&&row.servers.length>0) {
                someResult = row.servers.every(function(item,index,arry){
                        return item.flag
                })
                if(someResult == true) {
                    delete this.tableDataBefore.splice(index,1);
                } else {
                    this.$confirm('该份信息中包含需中环服务人员人工处理的光峰设备，预计24h后完成该部分设备信息更新', '光峰设备信息变更须知', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        delete this.tableDataBefore.splice(index,1);
                    }).catch(() => {         
                    });
                }
                
            
            } else {
                delete this.tableDataBefore.splice(index,1);
            }
             
        }
        searchList(){
            let cinemaInformationConfirmation = JSON.parse(window.localStorage.getItem('cinemaInformationConfirmation'))
            let params = {
                taskId: cinemaInformationConfirmation.taskId,
            }
            console.log(params)
            this.loading = true;
            Service.flmDetail(params).then((res)=>{
                 if(res.data.retMessage=='成功'){
                    this.findByPropertyCodeList = res.data.result
                    for(let item of res.data.result.deviceAfter) {
                        this.$set(item,'roleName','')
                    }
                    this.tableDataAfter = res.data.result.deviceAfter
                    this.tableDataBefore = res.data.result.deviceBefore
                    this.loading = false;

                //    this['$message']({
                //         message: res.data.retMessage,
                //         type: 'success'
                //     });
                }else{
                    this['$message']({
                        message: res.data.retMessage,
                        type: 'error'
                    });
                }
               
            })
        }
        // findByPropertyCode() {
        //     let parames = '31021201';
        //     Service.findByPropertyCode(parames).then((res) =>{
        //         if(res.succeeded){
        //             this.findByPropertyCodeList = res.data
        //         }else{
        //             this['$message']({
        //                 message: res.data.errorMessage,
        //                 type: 'error'
        //             });
        //         }
        //     });
        // }
        handleSizeChange(val) {
            this.pageSize = val;
            this.searchList();
        }

        handleCurrentChange(val) {
            this.page = val;
            this.searchList();
        }

        showDetail(){
        
        }

        dateFormat(date){
            return moment(date).format("YYYY-MM-DD,H:m:s");
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            console.log(document.documentElement.clientWidth)
            // if(document.documentElement.clientWidth == 1920) {
            //     this.windowWeight = document.documentElement.clientWidth - 1339;
            // } else if(document.documentElement.clientWidth <= 1280){
            //     this.windowWeight = document.documentElement.clientWidth - 1082;
            // } else if(document.documentElement.clientWidth < 1920&&document.documentElement.clientWidth > 1280){
            //     this.windowWeight = document.documentElement.clientWidth - 1300;
            // } else {
            //     this.windowWeight = document.documentElement.clientWidth - 1600;
            // }
            // this.windowWeight1 = document.documentElement.clientWidth - 1165;

            // this.height = this.windowHeight - 430;
        }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            // this.height = document.documentElement.clientHeight - 500
            this.conmonDisabled = true;
            this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 500;
        }
        condition(data) {
            console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 430;
            this.bodyHeight = document.documentElement.clientHeight - 430
            this.searchList();
        }
        created(){
            const me = this;
            this.resizeEvent();
            this.searchList();
            // this.findByPropertyCode()
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
    /deep/ .el-table td, .el-table th.is-leaf ,/deep/.el-table--border th, .el-table__fixed-right-patch{
        border-bottom: 1px solid #EBEEF5;
        border: 1px solid #EBEEF5; 
    }
    /deep/ .el-table .el-col {
        line-height: 45px;
        border-right: 1px solid #EBEEF5;
        border-bottom: 1px solid #EBEEF5;
        overflow: hidden;
    }
    /deep/ .el-table .cell {
        padding: 0;
        text-align: center;
    }
    /deep/ .el-table--border td:last-child {
        padding: 0;
    }
    .conten {
        clear: both;
        .left {
            float: left;
            width: 60%;
            background-color: rgba(230, 247, 255, 0.54);
            
            &:last-child{
                width: 38%;
                margin-left: 1%;
                p {
                    text-align: center;
                }
                border-radius: 10px;
                background-color: rgba(234, 233, 233, 0.28);
                /deep/ .el-table td, .el-table th.is-leaf,/deep/ .el-table--border th, .el-table__fixed-right-patch {
                background-color: rgba(234, 233, 233, 0.28);
            }
            }
            p {
                font-size: 16px;
                font-weight: bold;
                margin: 20px;
            }
        }
    }
    .bg-purple-light {
        ul {
             margin: 10px;
            // width: 334px !important;
            overflow-x: auto;
            display: flex;
            li {
                float: left;
                width: 165px;
                border: 1px solid #EBEEF5;
                border-radius: 4px;
                margin-right: 10px;
                // overflow: hidden;
                span {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                    line-height: 20px;
                }
            }
        }
        
    }
    .button_tip{
         width: 100px;
        border: none;
        padding: 0;
    }
    .el-icon-circle-plus-outline {
        font-size: 20px;
        color: blue;
        margin-right: 10px;
    }
  .dialogVisible1 p {
      margin: 10px;
  }
  /deep/ .el-table .cell, /deep/ .el-table th div {
      white-space:normal;
  }
  .el-message-box__wrapper .el-message-box .el-message-box__btns .el-button.el-button--default {
      .el-button {
          display: none;
      }
  }
</style>